<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>查询图书</title>
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="jquery.cookie.js"></script>
    <link rel="icon" href="images/search.png" type="img/x-ico" />
</head>

<body>

<ul>
    <li><a class="active" href="Manager.html">返回上一页</a></li>
    <li><a href="">查询图书</a></li>
</ul>
<div class="search">
    <input type="text" id="sou" placeholder="搜索">
    <input type="text" id="bookWareId" placeholder="输入图书馆藏id">
    <input type="text" id="bookName" placeholder="输入图书名称">
    <input type="text" id="bookAuthor" placeholder="输入图书作者">
    <input type="text" id="bookPublisher" placeholder="输入图书出版社">
    <input type="text" id="bookType" placeholder="输入图书类型">&nbsp;
    <input type="button" id="sure" value="查询" >
</div>
<div id="t">
    <table id="table" class="mytable" border="2" bgcolor="#f0f8ff"></table>
</div>
</body>

</html>

<style>
    body {
        margin: 0px;
        padding: 0px;
        font-family: sans-serif;
        /*设置字体为sans-serif*/
        background-image: url(images/library.jpg);
        background-size: 100% 100%;
        background-attachment: fixed;
        /*背景图片尺寸为覆盖cover*/
    }

    ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a,
    .dropbtn {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    li a:hover,
    .user:hover,
    .dropdown:hover {
        background-color: #111;
        /*鼠标移动时背景颜色*/
    }

    #sou {
        background-image: url('images/searchicon.png');
        /* 搜索按钮图标 */
        background-position: 5px 1px;
        /* 定位搜索按钮 */
        background-repeat: no-repeat;
        /* 不重复图片*/
        width: 100%;
        font-size: 20px;
        /* 提示文字大小 */
        padding: 12px 20px 12px 20px;
        border: 4px solid #ddd;
        margin-bottom: 12px;
    }

    .search {
        width: 20%;
        margin: 50px auto;
        margin-left: 300px;
        /*搜索栏的位置*/
        display: flex;
        /**/
    }

    .search input {
        float: left;
        flex: 4;
        height: 40px;
        outline: none;
        border: 1px solid white;
        box-sizing: border-box;
        padding-left: 10px;
    }

    .search button {
        float: right;
        flex: 1;
        height: 30px;
        background-color: rgb(63, 224, 245);
        color: white;
        border-style: none;
        outline: none;
    }

    .search button i {
        font-style: normal;
    }

    .search button:hover {
        font-size: 20px;
        background-color: rgb(63, 224, 245);
    }

    #t{
        padding-left:300px;
    }
    mytable {
        width: 500px;
        border: 2px;
        text-align: center;
        border-collapse: collapse;
        background-color: cornsilk;
        padding-left:20%;
    }

    .mytable tr {
        width: 100px;
        padding-left:15%;
    }
    #sure{
        text-align: center;
        background: transparent;
        border: none;
        outline: none;
        font-size: 15px;
        color: #03a9f4;
        background: rgb(190, 221, 247);
        padding: 4px 4px;
        cursor: pointer;
        /*光标呈现为指示链接的指针（一只手）*/
        border-radius: 10px;
        position: relative;
        top: auto;
    }

    #yue{
        text-align: center;
        background: transparent;
        border: none;
        outline: none;
        font-size: 15px;
        color: #03a9f4;
        background: rgb(190, 221, 247);
        padding: 4px 4px;
        cursor: pointer;
        /*光标呈现为指示链接的指针（一只手）*/
        border-radius: 10px;
        position: relative;
        top: auto;
    }

</style>

<script>
    $("#sure").click(function () {
        var bookware = {
            bookWareId:$("#bookWareId").val(),
            bookName:$("#bookName").val(),
            bookAuthor:$("#bookAuthor").val(),
            bookPublisher:$("#bookPublisher").val(),
            bookType:$("#bookType").val()
        }
        var html = "<tr><th>图书馆藏ID</th><th>图书名称</th><th>图书ISBN</th><th>图书作者</th><th>图书出版社</th><th>图书类型</th><th>图书价格</th><th>图书总量</th><th>已借出</th><th>历史总借出</th><th>图书评分</th></tr>"
        $.ajax({
            url:"http://localhost:8080/bookware/findbookware",
            type:"post",
            dataType: 'json',
            data: JSON.stringify(bookware),
            contentType: "application/json",

            success:function (res) {
                alert(res.msg)
                if(res.msg=="查询图书成功") {
                    for (var i = 0; i < res.data.length; i++) {
                        html = html + "<tr><td>" + res.data[i].bookWareId + "</td><td>" + res.data[i].bookName + "</td><td>" + res.data[i].bookISBN  + "</td><td>" +
                            res.data[i].bookAuthor +"</td><td>" + res.data[i].bookPublisher +"</td><td>" + res.data[i].bookType + "</td><td>" +
                            res.data[i].bookPrice +"</td><td>" + res.data[i].bookTotal + "</td><td>" + res.data[i].bookLending + "</td><td>" +
                            res.data[i].bookHistory + "</td><td>" + res.data[i].bookGrade +"</td></tr>";

                    }
                    $("#table").html(html)
                }
            },
            error: function (res) {
                alert("JSON数据获取失败，请联系管理员！");
            }
        })
    })
    $(function () {
        $(document).on("click", "#yue", function () {
            var id = $(this).parents("tr").find("td").eq(0).html();
            var bookwareAndUser = {
                userId:$.cookie('student'),
                bookWareId:id
            }
            console.log(bookwareAndUser.bookWareId,bookwareAndUser.userId)
            $.ajax({
                url: "http://localhost:8080/bookware/order",
                type: "post",
                dataType: 'json',
                data: JSON.stringify(bookwareAndUser),
                contentType: "application/json",
                success: function (res) {
                    alert(res.msg)
                },
                error: function (res) {
                    alert("JSON数据获取失败，请联系管理员！");
                }
            })
        })
    })
    // $("#Yue").click(function () {
    //   var bookwareAndUser = {
    //     userId:$.cookie('student'),
    //     bookWareId:
    //   }
    //   $.ajax({
    //     url: "http://localhost:8080/bookware/order",
    //     type: "post",
    //     dataType: 'json',
    //     data: JSON.stringify(bookwareAndUser),
    //     contentType: "application/json",
    //     success: function (res) {
    //       alert(res.msg)
    //     },
    //     error: function (res) {
    //       alert("JSON数据获取失败，请联系管理员！");
    //     }
    //   })
    // })

</script>